<template>
    <div>
        <el-menu-item v-if="!item.child" :index="item.url">
            {{ item.permissionName }}
        </el-menu-item>

        <el-sub-menu v-else :index="item.url">
            <template #title>
                <span>{{ item.permissionName }}</span>
            </template>
            <div v-for="(child,index) in item.children" :key="index">
                <DynamicMenu :item="child"></DynamicMenu>
            </div>
        </el-sub-menu>
    </div>
</template>

<script  lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
    name:'DynamicMenu',
    props:{
        item:{
            type:Object,
            required:true
        }
    },
  setup() {
    const router = useRouter(); // 获取 router 实例

    const handleMenuClick = (item: any) => {
      console.log('Menu item clicked:', item);
      router.push({ name: item.routingName }); // 根据 item 的 name 路由跳转
    };
    return {
      handleMenuClick
    };
  }
});
</script>

<style scoped>

</style>